﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>选项卡 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link active" href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#tabs" class="nav-link font-weight-bold"><span>标签</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#basic-usage" class="nav-link"><span>基本用法</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#cards-integration" class="nav-link"><span>Cards 集成</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#pills-variant" class="nav-link"><span>Pills variant</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#fill-and-justify" class="nav-link"><span>填充并对齐</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#fill" class="nav-link"><span>填充</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#justified" class="nav-link"><span>Justified</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#alignment" class="nav-link"><span>对齐</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#bottom-placement-of-tab-controls" class="nav-link"><span>选项卡控件的底部位置</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#vertical-tabs" class="nav-link"><span>垂直选项卡</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#active-classes" class="nav-link"><span>Active 类</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#fade-animation" class="nav-link"><span>淡入淡出动画</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#add-tabs-without-content" class="nav-link"><span>添加不带内容的选项卡</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#add-custom-content-to-tab-title" class="nav-link"><span>将自定义内容添加到选项卡标题</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#apply-custom-classes-to-the-generated-nav-tabs-or-pills" class="nav-link"><span>将自定义类应用于生成的导航选项卡或pills</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#lazy-loading-tab-content" class="nav-link"><span>延迟加载选项卡内容</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#keyboard-navigation" class="nav-link"><span>键盘导航</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#programmatically-activating-and-deactivating-tabs" class="nav-link"><span>以编程方式激活和停用选项卡</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#preventing-a-b-tab-from-being-activated" class="nav-link"><span>防止&lt;b-tab&gt;被激活</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#advanced-examples" class="nav-link"><span>高级示例</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#external-controls-using-v-model" class="nav-link"><span>外部控件使用 v-model</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#dynamic-tabs--tabs-end-slot" class="nav-link"><span>动态标签 + tabs-end slot</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#component-reference" class="nav-link"><span>组件引用</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-tabs" class="nav-link"><span>&lt;b-tabs&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-tab" class="nav-link"><span>&lt;b-tab&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-components" class="nav-link"><span>导入单个组件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>导入为Vue.js插件</span></a></li>
</ul>
</li>
</ul>
</div>

<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

<nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
<ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active" target="_self">首页</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs" class="nuxt-link-active" target="_self">中文手册</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs/components/" class="nuxt-link-active" target="_self">组件</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">选项卡</span></li>
</ol>
</nav>
<div class="clearfix d-block"></div>
  <h1 class="bd-title" id="content">选项卡(Tabs)</h1>
  <p class="bd-lead">Create a widget of tabbable panes of <em>local content</em>. The tabs component is built upon navs and cards internally, and provides full keyboard navigation control of the tabs.</p>
  <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>







<nav class="bd-quick-links mb-3 d-xl-none" data-v-811345e6="">
<header data-v-811345e6="">
<button data-v-811345e6="" type="button" class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed" aria-controls="bd-quick-links-collapse" aria-expanded="false"><span data-v-811345e6="">Show</span> page table of contents </button>
</header>
<ul data-v-811345e6="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#basic-usage" class=""><span data-v-811345e6="">Basic usage</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#cards-integration" class=""><span data-v-811345e6="">Cards integration</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#pills-variant" class=""><span data-v-811345e6="">Pills variant</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#fill-and-justify" class=""><span data-v-811345e6="">Fill and justify</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#fill" class=""><span data-v-811345e6="">Fill</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#justified" class=""><span data-v-811345e6="">Justified</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#alignment" class=""><span data-v-811345e6="">Alignment</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#bottom-placement-of-tab-controls" class=""><span data-v-811345e6="">Bottom placement of tab controls</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#vertical-tabs" class=""><span data-v-811345e6="">Vertical tabs</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#active-classes" class=""><span data-v-811345e6="">Active classes</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#fade-animation" class=""><span data-v-811345e6="">Fade animation</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#add-tabs-without-content" class=""><span data-v-811345e6="">Add tabs without content</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#add-custom-content-to-tab-title" class=""><span data-v-811345e6="">Add custom content to tab title</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#apply-custom-classes-to-the-generated-nav-tabs-or-pills" class=""><span data-v-811345e6="">Apply custom classes to the generated nav-tabs or pills</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#lazy-loading-tab-content" class=""><span data-v-811345e6="">Lazy loading tab content</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#keyboard-navigation" class=""><span data-v-811345e6="">Keyboard navigation</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#programmatically-activating-and-deactivating-tabs" class=""><span data-v-811345e6="">Programmatically activating and deactivating tabs</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#preventing-a-b-tab-from-being-activated" class=""><span data-v-811345e6="">Preventing a &lt;b-tab&gt; from being activated</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#advanced-examples" class=""><span data-v-811345e6="">Advanced examples</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#external-controls-using-v-model" class=""><span data-v-811345e6="">External controls using v-model</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#dynamic-tabs--tabs-end-slot" class=""><span data-v-811345e6="">Dynamic tabs + tabs-end slot</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#component-reference" class=""><span data-v-811345e6="">组件引用</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-tabs" class=""><span data-v-811345e6="">&lt;b-tabs&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-tab" class=""><span data-v-811345e6="">&lt;b-tab&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-individual-components" class=""><span data-v-811345e6="">导入单个组件</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-as-a-plugin" class=""><span data-v-811345e6="">导入为Vue.js插件</span></a></li>
</ul>
</li>
</ul>
</nav>
<p>For navigation based tabs (i.e. tabs that would change the URL), use the <a href="../../../bootstrap-vue/docs/components/nav" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-nav&gt;</code></a> component instead.</p>
<h2 id="basic-usage" class="bv-no-focus-ring"><span class="bd-content-title">基本用法<a class="anchorjs-link" href="#basic-usage" aria-labelledby="basic-usage"></a></span></h2>
<div translate="translate" class="bd-example vue-example vue-example-b-tabs notranslate">
<div>
<div class="tabs" id="__BVID__1644">
<div class="">
<ul role="tablist" class="nav nav-tabs" id="__BVID__1644__BV_tab_controls_">
<li role="presentation" class="nav-item"><a role="tab" id="__BVID__1645___BV_tab_button__" aria-selected="true" aria-setsize="3" aria-posinset="1" aria-controls="__BVID__1645" target="_self" href="#" class="nav-link active">First</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="3" aria-posinset="2" target="_self" href="#" class="nav-link" id="__BVID__1647___BV_tab_button__" aria-controls="__BVID__1647">Second</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="3" aria-posinset="3" target="_self" aria-disabled="true" href="#" class="nav-link disabled disabled" id="__BVID__1649___BV_tab_button__" aria-controls="__BVID__1649">Disabled</a></li>
</ul>
</div>
<div class="tab-content mt-3" id="__BVID__1644__BV_tab_container_">
<div role="tabpanel" aria-hidden="false" class="tab-pane active" id="__BVID__1645" aria-labelledby="__BVID__1645___BV_tab_button__">
<p>I'm the first tab</p>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane" id="__BVID__1647" aria-labelledby="__BVID__1647___BV_tab_button__" style="display: none;">
<p>I'm the second tab</p>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane disabled" id="__BVID__1649" aria-labelledby="__BVID__1649___BV_tab_button__" style="display: none;">
<p>I'm a disabled tab!</p>
</div>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-tabs</span> <span class="hljs-attr">content-class</span>=<span class="hljs-string">"mt-3"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"First"</span> <span class="hljs-attr">active</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I'm the first tab<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Second"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I'm the second tab<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Disabled"</span> <span class="hljs-attr">disabled</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I'm a disabled tab!<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-tabs</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p><strong>提示：</strong> 
  如果动态添加或删除<code translate="no" class="notranslate text-nowrap">&lt;b-tab&gt;</code>组件（即<code translate="no" class="notranslate text-nowrap">v-if</code>或for循环），则应为每个子<code translate="no" class="notranslate text-nowrap">&lt;b-tab&gt;</code>组件提供唯一的键值。 <code translate="no" class="notranslate text-nowrap">key</code>
    属性是特殊的Vue属性，请参阅<a href="https://vuejs.org/v2/api/#key" target="_blank" rel="noopener">https://vuejs.org/v2/api/#key</a>。
</p>
<h2 id="cards-integration" class="bv-no-focus-ring"><span class="bd-content-title">Cards 集成<a class="anchorjs-link" href="#cards-integration" aria-labelledby="cards-integration"></a></span></h2>
<p>
  选项卡支持与引导卡集成。只需将<code translate="no" class="notranslate text-nowrap">card</code>属性添加到<code translate="no" class="notranslate text-nowrap">&lt;b-tabs&gt;</code>
  并将其放在<code translate="no" class="notranslate text-nowrap">&lt;b-card&gt;</code>组件中。请注意，您应该在<code translate="no" class="notranslate text-nowrap">&lt;b-card&gt;</code>
  组件上添加<code translate="no" class="notranslate text-nowrap">no-body</code> 道具，以便正确装饰卡头并移除由<code translate="no" class="notranslate text-nowrap">card-body</code>引入的额外填充。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-tabs-card notranslate">
<div>
<div class="card">
<div class="tabs" id="__BVID__1652">
<div class="card-header">
<ul role="tablist" class="nav nav-tabs card-header-tabs" id="__BVID__1652__BV_tab_controls_">
<li role="presentation" class="nav-item"><a role="tab" aria-selected="true" aria-setsize="2" aria-posinset="1" target="_self" href="#" class="nav-link active" id="__BVID__1653___BV_tab_button__" aria-controls="__BVID__1653">Tab 1</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="2" aria-posinset="2" target="_self" href="#" class="nav-link" id="__BVID__1655___BV_tab_button__" aria-controls="__BVID__1655">Tab 2</a></li>
</ul>
</div>
<div class="tab-content" id="__BVID__1652__BV_tab_container_">
<div role="tabpanel" aria-hidden="false" class="tab-pane active card-body" id="__BVID__1653" aria-labelledby="__BVID__1653___BV_tab_button__">
<p class="card-text">Tab contents 1</p>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane card-body" id="__BVID__1655" aria-labelledby="__BVID__1655___BV_tab_button__" style="display: none;">
<p class="card-text">Tab contents 2</p>
</div>
</div>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">no-body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tabs</span> <span class="hljs-attr">card</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tab 1"</span> <span class="hljs-attr">active</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Tab contents 1<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tab 2"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Tab contents 2<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-tabs</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>
  当<code translate="no" class="notranslate text-nowrap">&lt;b-tabs&gt;</code>处于 <code translate="no" class="notranslate text-nowrap">card</code> 模式时，每个<code translate="no" class="notranslate text-nowrap">&lt;b-tab&gt;</code>
  子组件将自动应用<code translate="no" class="notranslate text-nowrap">card-body</code>类（该类在选项卡内容周围提供填充）。要禁用<code translate="no" class="notranslate text-nowrap">card-body</code>类，请在<code translate="no" class="notranslate text-nowrap">&lt;b-tab&gt;</code>子组件上设置<code translate="no" class="notranslate text-nowrap">no-body</code>属性。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-tabs-card-no-body notranslate">
<div>
<div class="card">
<div class="tabs" id="__BVID__1658">
<div class="card-header">
<ul role="tablist" class="nav nav-tabs card-header-tabs" id="__BVID__1658__BV_tab_controls_">
<li role="presentation" class="nav-item"><a role="tab" aria-selected="false" aria-setsize="4" aria-posinset="1" target="_self" href="#" class="nav-link" id="__BVID__1659___BV_tab_button__" aria-controls="__BVID__1659" tabindex="-1">Picture 1</a></li>
<li role="presentation" class="nav-item"><a role="tab" aria-selected="false" aria-setsize="4" aria-posinset="2" target="_self" href="#" class="nav-link" id="__BVID__1661___BV_tab_button__" aria-controls="__BVID__1661" tabindex="-1">Picture 2</a></li>
<li role="presentation" class="nav-item"><a role="tab" aria-selected="false" aria-setsize="4" aria-posinset="3" target="_self" href="#" class="nav-link" id="__BVID__1663___BV_tab_button__" aria-controls="__BVID__1663" tabindex="-1">Picture 3</a></li>
<li role="presentation" class="nav-item"><a role="tab" aria-selected="true" aria-setsize="4" aria-posinset="4" target="_self" href="#" class="nav-link active" id="__BVID__1665___BV_tab_button__" aria-controls="__BVID__1665">Text</a></li>
</ul>
</div>
<div class="tab-content" id="__BVID__1658__BV_tab_container_">
<div role="tabpanel" aria-hidden="true" class="tab-pane" id="__BVID__1659" aria-labelledby="__BVID__1659___BV_tab_button__" style="display: none;"><img src="https://picsum.photos/600/200/?image=21" class="card-img-bottom">
<div class="card-footer">Picture 1 footer</div>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane" id="__BVID__1661" aria-labelledby="__BVID__1661___BV_tab_button__" style="display: none;"><img src="https://picsum.photos/600/200/?image=25" class="card-img-bottom">
<div class="card-footer">Picture 2 footer</div>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane" id="__BVID__1663" aria-labelledby="__BVID__1663___BV_tab_button__" style="display: none;"><img src="https://picsum.photos/600/200/?image=26" class="card-img-bottom">
<div class="card-footer">Picture 3 footer</div>
</div>
<div role="tabpanel" aria-hidden="false" class="tab-pane active card-body" id="__BVID__1665" aria-labelledby="__BVID__1665___BV_tab_button__" style="">
<h4 class="card-title">
  此选项卡没有设置<code>no-body</code>道具
</h4>
<p class="card-text"> Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum
          consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex
          consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt
          veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua
          esse irure. </p>
</div>
</div>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">no-body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tabs</span> <span class="hljs-attr">card</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">no-body</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Picture 1"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-img</span> <span class="hljs-attr">bottom</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://picsum.photos/600/200/?image=21"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-card-img</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-footer</span>&gt;</span>Picture 1 footer<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-footer</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">no-body</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Picture 2"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-img</span> <span class="hljs-attr">bottom</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://picsum.photos/600/200/?image=25"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-card-img</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-footer</span>&gt;</span>Picture 2 footer<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-footer</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">no-body</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Picture 3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-img</span> <span class="hljs-attr">bottom</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://picsum.photos/600/200/?image=26"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-card-img</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-footer</span>&gt;</span>Picture 3 footer<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-footer</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Text"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-title</span>&gt;</span>This tab does not have the <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>no-body<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span> prop set<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-title</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>
          Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum
          consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex
          consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt
          veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua
          esse irure.
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-tabs</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p><strong>注意:</strong>
  当<code translate="no" class="notranslate text-nowrap">no-body</code>不在<code translate="no" class="notranslate text-nowrap">&lt;b-tab&gt;</code>下时，
  在<code translate="no" class="notranslate text-nowrap">&lt;b-tabs&gt;</code>上设置<code translate="no" class="notranslate text-nowrap">no-body</code>道具不会有任何影响（因为仅在
  <code translate="no" class="notranslate text-nowrap">card</code>模式下才设置<code translate="no" class="notranslate text-nowrap">card-body</code>类）。
  </p>
<p>
  有关卡组件的详细信息，请参阅<a href="../../../bootstrap-vue/docs/components/card" class="font-weight-bold">卡文档 </a>。
</p>
<h2 id="pills-variant" class="bv-no-focus-ring"><span class="bd-content-title">Pills variant<a class="anchorjs-link" href="#pills-variant" aria-labelledby="pills-variant"></a></span></h2>
<p>
  默认情况下，选项卡使用<code translate="no" class="notranslate text-nowrap">tabs</code>样式。只需将<code translate="no" class="notranslate text-nowrap">pills</code>属性添加到<code translate="no" class="notranslate text-nowrap">&lt;b-tabs&gt;</code>即可获得pills样式变量。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-tabs-pills notranslate">
<div>
<div class="card">
<div class="tabs" id="__BVID__1668">
<div class="card-header">
<ul role="tablist" class="nav nav-pills card-header-pills" id="__BVID__1668__BV_tab_controls_">
<li role="presentation" class="nav-item"><a role="tab" aria-selected="true" aria-setsize="2" aria-posinset="1" target="_self" href="#" class="nav-link active" id="__BVID__1669___BV_tab_button__" aria-controls="__BVID__1669">Tab 1</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="2" aria-posinset="2" target="_self" href="#" class="nav-link" id="__BVID__1671___BV_tab_button__" aria-controls="__BVID__1671">Tab 2</a></li>
</ul>
</div>
<div class="tab-content" id="__BVID__1668__BV_tab_container_">
<div role="tabpanel" aria-hidden="false" class="tab-pane active card-body" id="__BVID__1669" aria-labelledby="__BVID__1669___BV_tab_button__">
<p class="card-text">Tab contents 1</p>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane card-body" id="__BVID__1671" aria-labelledby="__BVID__1671___BV_tab_button__" style="display: none;">
<p class="card-text">Tab contents 2</p>
</div>
</div>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">no-body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tabs</span> <span class="hljs-attr">pills</span> <span class="hljs-attr">card</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tab 1"</span> <span class="hljs-attr">active</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Tab contents 1<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tab 2"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Tab contents 2<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-tabs</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h2 id="fill-and-justify" class="bv-no-focus-ring"><span class="bd-content-title">填充并对齐<a class="anchorjs-link" href="#fill-and-justify" aria-labelledby="fill-and-justify"></a></span></h2>
<p>
  强制<code translate="no" class="notranslate text-nowrap">&lt;b-tabs&gt;</code>控件扩展整个可用宽度。
</p>
<h3 id="fill" class="bv-no-focus-ring"><span class="bd-content-title">填充<a class="anchorjs-link" href="#fill" aria-labelledby="fill"></a></span></h3>
<p>要使用选项卡控件按比例填充所有可用空间，请设置填充属性。请注意，所有水平空间都已占用，但并非每个控件都具有相同的宽度。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-tabs-fill notranslate">
<div>
<div class="tabs" id="__BVID__1674">
<div class="">
<ul role="tablist" class="nav nav-tabs nav-fill" id="__BVID__1674__BV_tab_controls_">
<li role="presentation" class="nav-item"><a role="tab" aria-selected="true" aria-setsize="4" aria-posinset="1" target="_self" href="#" class="nav-link active" id="__BVID__1675___BV_tab_button__" aria-controls="__BVID__1675">First</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="4" aria-posinset="2" target="_self" href="#" class="nav-link" id="__BVID__1677___BV_tab_button__" aria-controls="__BVID__1677">Second</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="4" aria-posinset="3" target="_self" href="#" class="nav-link" id="__BVID__1679___BV_tab_button__" aria-controls="__BVID__1679">Very, very long title</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="4" aria-posinset="4" target="_self" aria-disabled="true" href="#" class="nav-link disabled disabled" id="__BVID__1681___BV_tab_button__" aria-controls="__BVID__1681">Disabled</a></li>
</ul>
</div>
<div class="tab-content mt-3" id="__BVID__1674__BV_tab_container_">
<div role="tabpanel" aria-hidden="false" class="tab-pane active" id="__BVID__1675" aria-labelledby="__BVID__1675___BV_tab_button__">
<p>I'm the first tab</p>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane" id="__BVID__1677" aria-labelledby="__BVID__1677___BV_tab_button__" style="display: none;">
<p>I'm the second tab</p>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane" id="__BVID__1679" aria-labelledby="__BVID__1679___BV_tab_button__" style="display: none;">
<p>I'm the tab with the very, very long title</p>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane disabled" id="__BVID__1681" aria-labelledby="__BVID__1681___BV_tab_button__" style="display: none;">
<p>I'm a disabled tab!</p>
</div>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-tabs</span> <span class="hljs-attr">content-class</span>=<span class="hljs-string">"mt-3"</span> <span class="hljs-attr">fill</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"First"</span> <span class="hljs-attr">active</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I'm the first tab<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Second"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I'm the second tab<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Very, very long title"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I'm the tab with the very, very long title<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Disabled"</span> <span class="hljs-attr">disabled</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I'm a disabled tab!<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-tabs</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h3 id="justified" class="bv-no-focus-ring"><span class="bd-content-title">Justified<a class="anchorjs-link" href="#justified" aria-labelledby="justified"></a></span></h3>
<p>
  对于等宽控件，请改用<code translate="no" class="notranslate text-nowrap">justified</code>属性。所有水平空间都将被控件占用，但与使用上面的<code translate="no" class="notranslate text-nowrap">填充</code>不同，每个控件的宽度都是相同的。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-tabs-justified notranslate">
<div>
<div class="tabs" id="__BVID__1684">
<div class="">
<ul role="tablist" class="nav nav-tabs nav-justified" id="__BVID__1684__BV_tab_controls_">
<li role="presentation" class="nav-item"><a role="tab" aria-selected="true" aria-setsize="4" aria-posinset="1" target="_self" href="#" class="nav-link active" id="__BVID__1685___BV_tab_button__" aria-controls="__BVID__1685">First</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="4" aria-posinset="2" target="_self" href="#" class="nav-link" id="__BVID__1687___BV_tab_button__" aria-controls="__BVID__1687">Second</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="4" aria-posinset="3" target="_self" href="#" class="nav-link" id="__BVID__1689___BV_tab_button__" aria-controls="__BVID__1689">Very, very long title</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="4" aria-posinset="4" target="_self" aria-disabled="true" href="#" class="nav-link disabled disabled" id="__BVID__1691___BV_tab_button__" aria-controls="__BVID__1691">Disabled</a></li>
</ul>
</div>
<div class="tab-content mt-3" id="__BVID__1684__BV_tab_container_">
<div role="tabpanel" aria-hidden="false" class="tab-pane active" id="__BVID__1685" aria-labelledby="__BVID__1685___BV_tab_button__">
<p>I'm the first tab</p>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane" id="__BVID__1687" aria-labelledby="__BVID__1687___BV_tab_button__" style="display: none;">
<p>I'm the second tab</p>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane" id="__BVID__1689" aria-labelledby="__BVID__1689___BV_tab_button__" style="display: none;">
<p>I'm the tab with the very, very long title</p>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane disabled" id="__BVID__1691" aria-labelledby="__BVID__1691___BV_tab_button__" style="display: none;">
<p>I'm a disabled tab!</p>
</div>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-tabs</span> <span class="hljs-attr">content-class</span>=<span class="hljs-string">"mt-3"</span> <span class="hljs-attr">justified</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"First"</span> <span class="hljs-attr">active</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I'm the first tab<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Second"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I'm the second tab<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Very, very long title"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I'm the tab with the very, very long title<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Disabled"</span> <span class="hljs-attr">disabled</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I'm a disabled tab!<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-tabs</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h2 id="alignment" class="bv-no-focus-ring"><span class="bd-content-title">对齐<a class="anchorjs-link" href="#alignment" aria-labelledby="alignment"></a></span></h2>
<p>
  要对齐选项卡控件，请使用<code translate="no" class="notranslate text-nowrap">align</code> prop。可用值包括<code translate="no" class="notranslate text-nowrap">left</code>
  、<code translate="no" class="notranslate text-nowrap">center</code>和<code translate="no" class="notranslate text-nowrap">right</code>。
  </p>
<div translate="translate" class="bd-example vue-example vue-example-b-tabs-alignment notranslate">
<div>
<div class="tabs" id="__BVID__1694">
<div class="">
<ul role="tablist" class="nav nav-tabs justify-content-center" id="__BVID__1694__BV_tab_controls_">
<li role="presentation" class="nav-item"><a role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" target="_self" href="#" class="nav-link active" id="__BVID__1695___BV_tab_button__" aria-controls="__BVID__1695">First</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="3" aria-posinset="2" target="_self" href="#" class="nav-link" id="__BVID__1697___BV_tab_button__" aria-controls="__BVID__1697">Second</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="3" aria-posinset="3" target="_self" aria-disabled="true" href="#" class="nav-link disabled disabled" id="__BVID__1699___BV_tab_button__" aria-controls="__BVID__1699">Disabled</a></li>
</ul>
</div>
<div class="tab-content mt-3" id="__BVID__1694__BV_tab_container_">
<div role="tabpanel" aria-hidden="false" class="tab-pane active" id="__BVID__1695" aria-labelledby="__BVID__1695___BV_tab_button__">
<p>I'm the first tab</p>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane" id="__BVID__1697" aria-labelledby="__BVID__1697___BV_tab_button__" style="display: none;">
<p>I'm the second tab</p>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane disabled" id="__BVID__1699" aria-labelledby="__BVID__1699___BV_tab_button__" style="display: none;">
<p>I'm a disabled tab!</p>
</div>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-tabs</span> <span class="hljs-attr">content-class</span>=<span class="hljs-string">"mt-3"</span> <span class="hljs-attr">align</span>=<span class="hljs-string">"center"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"First"</span> <span class="hljs-attr">active</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I'm the first tab<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Second"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I'm the second tab<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Disabled"</span> <span class="hljs-attr">disabled</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I'm a disabled tab!<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-tabs</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h2 id="bottom-placement-of-tab-controls" class="bv-no-focus-ring"><span class="bd-content-title">选项卡控件的底部位置<a class="anchorjs-link" href="#bottom-placement-of-tab-controls" aria-labelledby="bottom-placement-of-tab-controls"></a></span></h2>
<p>
  通过设置prop末端，将制表符控件可视地移动到<code translate="no" class="notranslate text-nowrap">end</code>。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-tabs-bottom notranslate">
<div>
<div class="card">
<div class="tabs" id="__BVID__1702">
<div class="tab-content" id="__BVID__1702__BV_tab_container_">
<div role="tabpanel" aria-hidden="false" class="tab-pane active card-body" id="__BVID__1703" aria-labelledby="__BVID__1703___BV_tab_button__">
<p class="card-text">Tab contents 1</p>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane card-body" id="__BVID__1705" aria-labelledby="__BVID__1705___BV_tab_button__" style="display: none;">
<p class="card-text">Tab contents 2</p>
</div>
</div>
<div class="card-footer">
<ul role="tablist" class="nav nav-pills card-header-pills" id="__BVID__1702__BV_tab_controls_">
<li role="presentation" class="nav-item"><a role="tab" aria-selected="true" aria-setsize="2" aria-posinset="1" target="_self" href="#" class="nav-link active" id="__BVID__1703___BV_tab_button__" aria-controls="__BVID__1703">Tab 1</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="2" aria-posinset="2" target="_self" href="#" class="nav-link" id="__BVID__1705___BV_tab_button__" aria-controls="__BVID__1705">Tab 2</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">no-body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tabs</span> <span class="hljs-attr">pills</span> <span class="hljs-attr">card</span> <span class="hljs-attr">end</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tab 1"</span> <span class="hljs-attr">active</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Tab contents 1<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tab 2"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Tab contents 2<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-tabs</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p><strong>注意事项：</strong></p>
<ul>
<li>
  底部放置视觉效果最好的<code translate="no" class="notranslate text-nowrap">pills</code> variant。当使用默认的<code translate="no" class="notranslate text-nowrap">tabs</code> 
  变量时，您可能需要提供自己的自定义样式类，因为Bootstrap v4 CSS假定这些选项卡始终位于tabs内容的顶部。
</li>
<li>要使用底部放置的控件提供更好的用户体验，请确保每个选项卡窗格的内容具有相同的高度并完全适合可见视口，否则用户将需要向上滚动以读取选项卡内容的开头。</li>
</ul>
<h2 id="vertical-tabs" class="bv-no-focus-ring"><span class="bd-content-title">垂直选项卡<a class="anchorjs-link" href="#vertical-tabs" aria-labelledby="vertical-tabs"></a></span></h2>
<p>
  通过将<code translate="no" class="notranslate text-nowrap">vertical</code> prop设置为<code translate="no" class="notranslate text-nowrap">true</code>，
  将制表符控件放置在左侧。垂直标签可以在启用或不启用<code translate="no" class="notranslate text-nowrap">true</code>模式的情况下工作。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-tabs-vertical notranslate">
<div>
<div class="card">
<div class="tabs row no-gutters" id="__BVID__1708">
<div class="col-auto">
<ul role="tablist" class="nav nav-pills flex-column card-header h-100 border-bottom-0 rounded-0" id="__BVID__1708__BV_tab_controls_">
<li role="presentation" class="nav-item"><a role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" target="_self" href="#" class="nav-link active" id="__BVID__1709___BV_tab_button__" aria-controls="__BVID__1709">Tab 1</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="3" aria-posinset="2" target="_self" href="#" class="nav-link" id="__BVID__1711___BV_tab_button__" aria-controls="__BVID__1711">Tab 2</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="3" aria-posinset="3" target="_self" href="#" class="nav-link" id="__BVID__1713___BV_tab_button__" aria-controls="__BVID__1713">Tab 3</a></li>
</ul>
</div>
<div class="tab-content col" id="__BVID__1708__BV_tab_container_">
<div role="tabpanel" aria-hidden="false" class="tab-pane active card-body" id="__BVID__1709" aria-labelledby="__BVID__1709___BV_tab_button__">
<p class="card-text">Tab contents 1</p>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane card-body" id="__BVID__1711" aria-labelledby="__BVID__1711___BV_tab_button__" style="display: none;">
<p class="card-text">Tab contents 2</p>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane card-body" id="__BVID__1713" aria-labelledby="__BVID__1713___BV_tab_button__" style="display: none;">
<p class="card-text">Tab contents 3</p>
</div>
</div>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">no-body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tabs</span> <span class="hljs-attr">pills</span> <span class="hljs-attr">card</span> <span class="hljs-attr">vertical</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tab 1"</span> <span class="hljs-attr">active</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Tab contents 1<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tab 2"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Tab contents 2<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tab 3"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Tab contents 3<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-tabs</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>
  通过设置<code translate="no" class="notranslate text-nowrap">end</code> prop，将制表符控件可视地移动到右侧：
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-tabs-vertical-end notranslate">
<div>
<div class="card">
<div class="tabs row no-gutters" id="__BVID__1716">
<div class="tab-content col" id="__BVID__1716__BV_tab_container_">
<div role="tabpanel" aria-hidden="false" class="tab-pane active card-body" id="__BVID__1717" aria-labelledby="__BVID__1717___BV_tab_button__">
<p class="card-text">Tab contents 1</p>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane card-body" id="__BVID__1719" aria-labelledby="__BVID__1719___BV_tab_button__" style="display: none;">
<p class="card-text">Tab contents 2</p>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane card-body" id="__BVID__1721" aria-labelledby="__BVID__1721___BV_tab_button__" style="display: none;">
<p class="card-text">Tab contents 3</p>
</div>
</div>
<div class="col-auto">
<ul role="tablist" class="nav nav-pills flex-column card-header h-100 border-bottom-0 rounded-0" id="__BVID__1716__BV_tab_controls_">
<li role="presentation" class="nav-item"><a role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" target="_self" href="#" class="nav-link active" id="__BVID__1717___BV_tab_button__" aria-controls="__BVID__1717">Tab 1</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="3" aria-posinset="2" target="_self" href="#" class="nav-link" id="__BVID__1719___BV_tab_button__" aria-controls="__BVID__1719">Tab 2</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="3" aria-posinset="3" target="_self" href="#" class="nav-link" id="__BVID__1721___BV_tab_button__" aria-controls="__BVID__1721">Tab 3</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">no-body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tabs</span> <span class="hljs-attr">pills</span> <span class="hljs-attr">card</span> <span class="hljs-attr">vertical</span> <span class="hljs-attr">end</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tab 1"</span> <span class="hljs-attr">active</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Tab contents 1<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tab 2"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Tab contents 2<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tab 3"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Tab contents 3<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-tabs</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>
  垂直选项卡控件的宽度将展开以适合选项卡标题的宽度。要控制宽度，请通过prop <code translate="no" class="notranslate text-nowrap">nav-wrapper-class</code>设置<a href="../../../bootstrap-vue/docs/reference/size-props#sizing-utility-classes" class="font-weight-bold">width utility class</a>。
  可以使用<code translate="no" class="notranslate text-nowrap">w-25</code>（25%宽度）、<code translate="no" class="notranslate text-nowrap">w-50</code>（50%宽度）等值，
  也可以使用<code translate="no" class="notranslate text-nowrap">col-2</code>、<code translate="no" class="notranslate text-nowrap">col-3</code>等列类。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-tabs-vertical-width notranslate">
<div>
<div class="card">
<div class="tabs row no-gutters" id="__BVID__1724">
<div class="col-auto w-50">
<ul role="tablist" class="nav nav-pills flex-column card-header h-100 border-bottom-0 rounded-0" id="__BVID__1724__BV_tab_controls_">
<li role="presentation" class="nav-item"><a role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" target="_self" href="#" class="nav-link active" id="__BVID__1725___BV_tab_button__" aria-controls="__BVID__1725">Tab 1</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="3" aria-posinset="2" target="_self" href="#" class="nav-link" id="__BVID__1727___BV_tab_button__" aria-controls="__BVID__1727">Tab 2</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="3" aria-posinset="3" target="_self" href="#" class="nav-link" id="__BVID__1729___BV_tab_button__" aria-controls="__BVID__1729">Tab 3</a></li>
</ul>
</div>
<div class="tab-content col" id="__BVID__1724__BV_tab_container_">
<div role="tabpanel" aria-hidden="false" class="tab-pane active card-body" id="__BVID__1725" aria-labelledby="__BVID__1725___BV_tab_button__">
<p class="card-text">Tab contents 1</p>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane card-body" id="__BVID__1727" aria-labelledby="__BVID__1727___BV_tab_button__" style="display: none;">
<p class="card-text">Tab contents 2</p>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane card-body" id="__BVID__1729" aria-labelledby="__BVID__1729___BV_tab_button__" style="display: none;">
<p class="card-text">Tab contents 3</p>
</div>
</div>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">no-body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tabs</span> <span class="hljs-attr">pills</span> <span class="hljs-attr">card</span> <span class="hljs-attr">vertical</span> <span class="hljs-attr">nav-wrapper-class</span>=<span class="hljs-string">"w-50"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tab 1"</span> <span class="hljs-attr">active</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Tab contents 1<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tab 2"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Tab contents 2<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tab 3"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Tab contents 3<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-tabs</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>
  垂直放置视觉效果最好的<code translate="no" class="notranslate text-nowrap">pills</code> variant。当使用默认的<code translate="no" class="notranslate text-nowrap">tabs</code>变量时，
  您可能需要提供自己的自定义样式类，因为Bootstrap v4 CSS假定tab控件始终位于tabs内容的顶部。
</p>
<p><strong>注意:</strong> <em>如果宽度小于选项卡标题，则可能会出现溢出文本。您可能需要额外的自定义样式。</em></p>
<h2 id="active-classes" class="bv-no-focus-ring"><span class="bd-content-title">Active 类<a class="anchorjs-link" href="#active-classes" aria-labelledby="active-classes"></a></span></h2>
<p>
  要将类应用于当前活动控件或选项卡，请使用<code translate="no" class="notranslate text-nowrap">active-nav-item-class</code>和<code translate="no" class="notranslate text-nowrap">active-tab-class</code>属性。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-tabs-classes notranslate">
<div>
<div class="tabs" id="__BVID__1732">
<div class="">
<ul role="tablist" class="nav nav-tabs" id="__BVID__1732__BV_tab_controls_">
<li role="presentation" class="nav-item"><a role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" target="_self" href="#" class="nav-link active font-weight-bold text-uppercase text-danger" id="__BVID__1733___BV_tab_button__" aria-controls="__BVID__1733">First</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="3" aria-posinset="2" target="_self" href="#" class="nav-link" id="__BVID__1735___BV_tab_button__" aria-controls="__BVID__1735">Second</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="3" aria-posinset="3" target="_self" aria-disabled="true" href="#" class="nav-link disabled disabled" id="__BVID__1737___BV_tab_button__" aria-controls="__BVID__1737">Disabled</a></li>
</ul>
</div>
<div class="tab-content mt-3" id="__BVID__1732__BV_tab_container_">
<div role="tabpanel" aria-hidden="false" class="tab-pane active font-weight-bold text-success" id="__BVID__1733" aria-labelledby="__BVID__1733___BV_tab_button__">
<p>I'm the first tab</p>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane" id="__BVID__1735" aria-labelledby="__BVID__1735___BV_tab_button__" style="display: none;">
<p>I'm the second tab</p>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane disabled" id="__BVID__1737" aria-labelledby="__BVID__1737___BV_tab_button__" style="display: none;">
<p>I'm a disabled tab!</p>
</div>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-tabs</span>
    <span class="hljs-attr">active-nav-item-class</span>=<span class="hljs-string">"font-weight-bold text-uppercase text-danger"</span>
    <span class="hljs-attr">active-tab-class</span>=<span class="hljs-string">"font-weight-bold text-success"</span>
    <span class="hljs-attr">content-class</span>=<span class="hljs-string">"mt-3"</span>
  &gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"First"</span> <span class="hljs-attr">active</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I'm the first tab<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Second"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I'm the second tab<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Disabled"</span> <span class="hljs-attr">disabled</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I'm a disabled tab!<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-tabs</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h2 id="fade-animation" class="bv-no-focus-ring"><span class="bd-content-title">淡入淡出动画<a class="anchorjs-link" href="#fade-animation" aria-labelledby="fade-animation"></a></span></h2>
<p>
  更改选项卡时默认启用淡入淡出。它可以在<code translate="no" class="notranslate text-nowrap">no-fade</code>属性的情况下禁用。
</p>
<h2 id="add-tabs-without-content" class="bv-no-focus-ring"><span class="bd-content-title">添加不带内容的选项卡<a class="anchorjs-link" href="#add-tabs-without-content" aria-labelledby="add-tabs-without-content"></a></span></h2>
<p>
  如果要添加没有任何内容的额外选项卡，可以将它们放在<code translate="no" class="notranslate text-nowrap">tabs-start</code> 或<code translate="no" class="notranslate text-nowrap">tabs-end</code>槽中：
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-tabs-item-slot notranslate">
<div>
<div class="tabs" id="__BVID__1740">
<div class="">
<ul role="tablist" class="nav nav-tabs" id="__BVID__1740__BV_tab_controls_">
<li class="nav-item"><a target="_self" href="#" class="nav-link">Another tab</a></li>
<li class="nav-item align-self-center">Plain text</li>
</ul>
</div>
<div class="tab-content" id="__BVID__1740__BV_tab_container_">
<div class="tab-pane active"></div>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-tabs</span>&gt;</span>
    <span class="hljs-comment">&lt;!-- Add your b-tab components here --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:tabs-end</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"() =&gt; {}"</span>&gt;</span>Another tab<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item align-self-center"</span>&gt;</span>Plain text<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-tabs</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>
  使用<code translate="no" class="notranslate text-nowrap">tabs-start</code>槽在“内容”选项卡按钮之前放置额外的选项卡按钮，并使用<code translate="no" class="notranslate text-nowrap">tabs-end</code>槽在“内容”选项卡按钮之后放置额外的选项卡按钮。
</p>
<p><strong>注意:</strong> 
  额外（无内容）选项卡按钮应该是<code translate="no" class="notranslate text-nowrap">&lt;b-nav-item&gt;</code>或
  根元素<code translate="no" class="notranslate text-nowrap">&lt;li&gt;</code> 和类<code translate="no" class="notranslate text-nowrap">nav-item</code>，以便正确呈现和语义标记。
</p>
<h2 id="add-custom-content-to-tab-title" class="bv-no-focus-ring"><span class="bd-content-title">将自定义内容添加到选项卡标题<a class="anchorjs-link" href="#add-custom-content-to-tab-title" aria-labelledby="add-custom-content-to-tab-title"></a></span></h2>
<p>
  如果要将自定义内容添加到选项卡标题，如HTML代码、图标或其他非交互式Vue组件，可以使用<code translate="no" class="notranslate text-nowrap">&lt;b-tab&gt;</code>的<code translate="no" class="notranslate text-nowrap">title</code>槽。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-tabs-title-slot notranslate">
<div>
<div class="tabs" id="__BVID__1743">
<div class="">
<ul role="tablist" class="nav nav-tabs" id="__BVID__1743__BV_tab_controls_">
<li role="presentation" class="nav-item"><a role="tab" aria-selected="true" aria-setsize="2" aria-posinset="1" target="_self" href="#" class="nav-link active" id="__BVID__1744___BV_tab_button__" aria-controls="__BVID__1744"><span aria-hidden="true" class="spinner-grow spinner-grow-sm"></span> I'm <i>custom</i> <strong>title</strong></a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="2" aria-posinset="2" target="_self" href="#" class="nav-link" id="__BVID__1746___BV_tab_button__" aria-controls="__BVID__1746"><span aria-hidden="true" class="spinner-border spinner-border-sm"></span> Tab 2 </a></li>
</ul>
</div>
<div class="tab-content" id="__BVID__1743__BV_tab_container_">
<div role="tabpanel" aria-hidden="false" class="tab-pane active" id="__BVID__1744" aria-labelledby="__BVID__1744___BV_tab_button__">
<p class="p-3">Tab contents 1</p>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane" id="__BVID__1746" aria-labelledby="__BVID__1746___BV_tab_button__" style="display: none;">
<p class="p-3">Tab contents 2</p>
</div>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-tabs</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">active</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:title</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-spinner</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"grow"</span> <span class="hljs-attr">small</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-spinner</span>&gt;</span> I'm <span class="hljs-tag">&lt;<span class="hljs-name">i</span>&gt;</span>custom<span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>title<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-3"</span>&gt;</span>Tab contents 1<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:title</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-spinner</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"border"</span> <span class="hljs-attr">small</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-spinner</span>&gt;</span> Tab 2
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-3"</span>&gt;</span>Tab contents 2<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-tabs</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p><strong>不要</strong> 将交互元素/组件放置在标题栏中。tab按钮是一个链接，它不支持HTML5规范中的子交互元素。</p>
<h2 id="apply-custom-classes-to-the-generated-nav-tabs-or-pills" class="bv-no-focus-ring"><span class="bd-content-title">将自定义类应用于生成的导航选项卡或pills<a class="anchorjs-link" href="#apply-custom-classes-to-the-generated-nav-tabs-or-pills" aria-labelledby="apply-custom-classes-to-the-generated-nav-tabs-or-pills"></a></span></h2>
<p>
  选项卡选择器基于Bootstrap v4的导航标记（即 <code translate="no" class="notranslate text-nowrap">ul.nav &gt; li.nav-item &gt; a.nav-link</code>）。
  在某些情况下，您可能希望按每个选项卡向<code translate="no" class="notranslate text-nowrap">&lt;li&gt;</code>（导航项）和/
  或 <code translate="no" class="notranslate text-nowrap">&lt;a&gt;</code>（导航链接）添加类。为此，
  只需将类名提供给<code translate="no" class="notranslate text-nowrap">title-item-class</code> prop（对于<code translate="no" class="notranslate text-nowrap">&lt;li&gt;</code>元素）
    或<code translate="no" class="notranslate text-nowrap">title-link-class</code>（对于<code translate="no" class="notranslate text-nowrap">&lt;a&gt;</code>元素）。值可以作为字符串或字符串数组传递。
</p>
<p><strong>注意:</strong> <em>
  <code translate="no" class="notranslate text-nowrap">active</code> 类将自动应用于活动tabs<code translate="no" class="notranslate text-nowrap">&lt;a&gt;</code>元素。您可能需要为此提供自定义类。
</em></p>
<div translate="translate" class="bd-example vue-example vue-example-b-tabs-with-classes notranslate">
<div>
<div class="card">
<div class="tabs" id="__BVID__1749">
<div class="card-header">
<ul role="tablist" class="nav nav-tabs card-header-tabs" id="__BVID__1749__BV_tab_controls_">
<li role="presentation" class="nav-item"><a role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" target="_self" href="#" class="nav-link active bg-primary text-light" id="__BVID__1750___BV_tab_button__" aria-controls="__BVID__1750">Tab 1</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="3" aria-posinset="2" target="_self" href="#" class="nav-link bg-light text-info" id="__BVID__1752___BV_tab_button__" aria-controls="__BVID__1752">Tab 2</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="3" aria-posinset="3" target="_self" href="#" class="nav-link bg-light text-info" id="__BVID__1754___BV_tab_button__" aria-controls="__BVID__1754">Tab 3</a></li>
</ul>
</div>
<div class="tab-content" id="__BVID__1749__BV_tab_container_">
<div role="tabpanel" aria-hidden="false" class="tab-pane active card-body" id="__BVID__1750" aria-labelledby="__BVID__1750___BV_tab_button__" style="">Tab contents 1</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane card-body" id="__BVID__1752" aria-labelledby="__BVID__1752___BV_tab_button__" style="display: none;">Tab contents 2</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane card-body" id="__BVID__1754" aria-labelledby="__BVID__1754___BV_tab_button__" style="display: none;">Tab contents 3</div>
</div>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">no-body</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tabs</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"tabIndex"</span> <span class="hljs-attr">card</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tab 1"</span> <span class="hljs-attr">:title-link-class</span>=<span class="hljs-string">"linkClass(0)"</span>&gt;</span>Tab contents 1<span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tab 2"</span> <span class="hljs-attr">:title-link-class</span>=<span class="hljs-string">"linkClass(1)"</span>&gt;</span>Tab contents 2<span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tab 3"</span> <span class="hljs-attr">:title-link-class</span>=<span class="hljs-string">"linkClass(2)"</span>&gt;</span>Tab contents 3<span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-tabs</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">tabIndex</span>: <span class="hljs-number">0</span>
      }
    },
    <span class="hljs-attr">methods</span>: {
      linkClass(idx) {
        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.tabIndex === idx) {
          <span class="hljs-keyword">return</span> [<span class="hljs-string">'bg-primary'</span>, <span class="hljs-string">'text-light'</span>]
        } <span class="hljs-keyword">else</span> {
          <span class="hljs-keyword">return</span> [<span class="hljs-string">'bg-light'</span>, <span class="hljs-string">'text-info'</span>]
        }
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h2 id="lazy-loading-tab-content" class="bv-no-focus-ring"><span class="bd-content-title">延迟加载选项卡内容<a class="anchorjs-link" href="#lazy-loading-tab-content" aria-labelledby="lazy-loading-tab-content"></a></span></h2>
<p>
  有时，最好只在激活选项卡时加载组件和数据，而不是在呈现<code translate="no" class="notranslate text-nowrap">&lt;b-tabs&gt;</code>集时加载所有选项卡（和相关数据）。
</p>
<p>
  单个<code translate="no" class="notranslate text-nowrap">&lt;b-tab&gt;</code>组件可以通过<code translate="no" class="notranslate text-nowrap">lazy</code> prop延迟加载，
  当设置时，它在激活（如图所示）之前不会装载<code translate="no" class="notranslate text-nowrap">&lt;b-tab&gt;</code> 的内容，并且在禁用（隐藏）选项卡时将卸载：
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-tabs-lazy-tab notranslate">
<div class="tabs" id="__BVID__1757">
<div class="">
<ul role="tablist" class="nav nav-tabs" id="__BVID__1757__BV_tab_controls_">
<li role="presentation" class="nav-item"><a role="tab" aria-selected="true" aria-setsize="2" aria-posinset="1" target="_self" href="#" class="nav-link active" id="__BVID__1758___BV_tab_button__" aria-controls="__BVID__1758">Regular tab</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="2" aria-posinset="2" target="_self" href="#" class="nav-link" id="__BVID__1762___BV_tab_button__" aria-controls="__BVID__1762">Lazy tab</a></li>
</ul>
</div>
<div class="tab-content mt-3" id="__BVID__1757__BV_tab_container_">
<div role="tabpanel" aria-hidden="false" class="tab-pane active" id="__BVID__1758" aria-labelledby="__BVID__1758___BV_tab_button__" style="">
<div role="alert" aria-live="polite" aria-atomic="true" class="alert alert-info">I'm always mounted</div>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane" id="__BVID__1762" aria-labelledby="__BVID__1762___BV_tab_button__" style="display: none;"></div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-tabs</span> <span class="hljs-attr">content-class</span>=<span class="hljs-string">"mt-3"</span>&gt;</span>
  <span class="hljs-comment">&lt;!-- This tabs content will always be mounted --&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Regular tab"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">b-alert</span> <span class="hljs-attr">show</span>&gt;</span>I'm always mounted<span class="hljs-tag">&lt;/<span class="hljs-name">b-alert</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>

  <span class="hljs-comment">&lt;!-- This tabs content will not be mounted until the tab is shown --&gt;</span>
  <span class="hljs-comment">&lt;!-- and will be un-mounted when hidden --&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Lazy tab"</span> <span class="hljs-attr">lazy</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">b-alert</span> <span class="hljs-attr">show</span>&gt;</span>I'm lazy mounted!<span class="hljs-tag">&lt;/<span class="hljs-name">b-alert</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-tabs</span>&gt;</span></pre></figure>
<p>
  通过在父<code translate="no" class="notranslate text-nowrap">&lt;b-tabs&gt;</code>组件上设置<code translate="no" class="notranslate text-nowrap">lazy</code> prop，还可以使所有tab变延迟：
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-tabs-lazy notranslate">
<div class="tabs" id="__BVID__1765">
<div class="">
<ul role="tablist" class="nav nav-tabs" id="__BVID__1765__BV_tab_controls_">
<li role="presentation" class="nav-item"><a role="tab" aria-selected="true" aria-setsize="2" aria-posinset="1" target="_self" href="#" class="nav-link active" id="__BVID__1766___BV_tab_button__" aria-controls="__BVID__1766">Tab 1</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="2" aria-posinset="2" target="_self" href="#" class="nav-link" id="__BVID__1768___BV_tab_button__" aria-controls="__BVID__1768">Tab 2</a></li>
</ul>
</div>
<div class="tab-content mt-3" id="__BVID__1765__BV_tab_container_">
<div role="tabpanel" aria-hidden="false" class="tab-pane active" id="__BVID__1766" aria-labelledby="__BVID__1766___BV_tab_button__" style="">
<div role="alert" aria-live="polite" aria-atomic="true" class="alert alert-info">I'm lazy mounted!</div>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane" id="__BVID__1768" aria-labelledby="__BVID__1768___BV_tab_button__" style="display: none;"></div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-tabs</span> <span class="hljs-attr">content-class</span>=<span class="hljs-string">"mt-3"</span> <span class="hljs-attr">lazy</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tab 1"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">b-alert</span> <span class="hljs-attr">show</span>&gt;</span>I'm lazy mounted!<span class="hljs-tag">&lt;/<span class="hljs-name">b-alert</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Tab 2"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">b-alert</span> <span class="hljs-attr">show</span>&gt;</span>I'm lazy mounted too!<span class="hljs-tag">&lt;/<span class="hljs-name">b-alert</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-tabs</span>&gt;</span></pre></figure>
<h2 id="keyboard-navigation" class="bv-no-focus-ring"><span class="bd-content-title">键盘导航<a class="anchorjs-link" href="#keyboard-navigation" aria-labelledby="keyboard-navigation"></a></span></h2>
<p>默认情况下，如果选项卡按钮具有焦点，则会启用键盘导航，以使ARIA符合tablists。</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>按键 </th>
<th>行为</th>
</tr>
</thead>
<tbody>
<tr>
<td><kbd class="notranslate" translate="no">LEFT</kbd> or <kbd class="notranslate" translate="no">UP</kbd></td>
<td>激活上一个非禁用选项卡</td>
</tr>
<tr>
<td><kbd class="notranslate" translate="no">RIGHT</kbd> or <kbd class="notranslate" translate="no">DOWN</kbd></td>
<td>激活下一个非禁用选项卡</td>
</tr>
<tr>
<td><kbd class="notranslate" translate="no">SHIFT</kbd>+<kbd class="notranslate" translate="no">LEFT</kbd> or <kbd class="notranslate" translate="no">SHIFT</kbd>+<kbd class="notranslate" translate="no">UP</kbd></td>
<td>激活第一个非禁用选项卡</td>
</tr>
<tr>
<td><kbd class="notranslate" translate="no">HOME</kbd></td>
<td>激活第一个非禁用选项卡</td>
</tr>
<tr>
<td><kbd class="notranslate" translate="no">SHIFT</kbd>+<kbd class="notranslate" translate="no">RIGHT</kbd> or <kbd class="notranslate" translate="no">SHIFT</kbd>+<kbd class="notranslate" translate="no">DOWN</kbd></td>
<td>激活最后一个非禁用选项卡</td>
</tr>
<tr>
<td><kbd class="notranslate" translate="no">END</kbd></td>
<td>激活最后一个非禁用选项卡</td>
</tr>
<tr>
<td><kbd class="notranslate" translate="no">TAB</kbd></td>
<td>将焦点移到活动选项卡内容</td>
</tr>
<tr>
<td><kbd class="notranslate" translate="no">SHIFT</kbd>+<kbd class="notranslate" translate="no">TAB</kbd></td>
<td>将焦点移到页面上的上一个控件</td>
</tr>
</tbody>
</table>
</div>
<p>
  通过设置prop <code translate="no" class="notranslate text-nowrap">no-key-nav</code>禁用键盘导航。行为现在默认为使用TAB键进行常规浏览器导航。
</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>按键</th>
<th>行为</th>
</tr>
</thead>
<tbody>
<tr>
<td><kbd class="notranslate" translate="no">TAB</kbd></td>
<td>移到页面上的下一个选项卡按钮或控件</td>
</tr>
<tr>
<td><kbd class="notranslate" translate="no">SHIFT</kbd>+<kbd class="notranslate" translate="no">TAB</kbd></td>
<td>移到页面上的上一个选项卡按钮或控件</td>
</tr>
<tr>
<td><kbd class="notranslate" translate="no">ENTER</kbd> or <kbd class="notranslate" translate="no">SPACE</kbd></td>
<td>激活当前聚焦按钮的选项卡</td>
</tr>
</tbody>
</table>
</div>
<h2 id="programmatically-activating-and-deactivating-tabs" class="bv-no-focus-ring"><span class="bd-content-title">以编程方式激活和停用选项卡<a class="anchorjs-link" href="#programmatically-activating-and-deactivating-tabs" aria-labelledby="programmatically-activating-and-deactivating-tabs"></a></span></h2>
<p>
  通过将<code translate="no" class="notranslate text-nowrap">v-model</code>设置为要显示的<code translate="no" class="notranslate text-nowrap">&lt;b-tabs&gt;</code> 的索引（从零开始），使用<code translate="no" class="notranslate text-nowrap">v-model</code>控制哪个选项卡处于活动状态（参见下面的示例）。
</p>
<p>
  或者，可以使用每个<code translate="no" class="notranslate text-nowrap">&lt;b-tab&gt;</code>上的<code translate="no" class="notranslate text-nowrap">active</code> prop和
  <code translate="no" class="notranslate text-nowrap">.sync</code>修饰符来激活选项卡，或者检测特定选项卡是否处于活动状态。
</p>
<p>
  每个<code translate="no" class="notranslate text-nowrap">&lt;b-tab&gt;</code>实例还提供两个激活或停用选项卡的公共方法。
  方法分别是<code translate="no" class="notranslate text-nowrap">.activate()</code> 和<code translate="no" class="notranslate text-nowrap">.deactivate()</code>。
  如果激活或停用失败（即某个选项卡被禁用或没有可将激活移动到的选项卡），则当前活动的选项卡将保持活动状态，该方法将返回<code translate="no" class="notranslate text-nowrap">false</code>。
  您需要引用<code translate="no" class="notranslate text-nowrap">&lt;b-tab&gt;</code>才能使用这些方法。
</p>
<h2 id="preventing-a-b-tab-from-being-activated" class="bv-no-focus-ring"><span class="bd-content-title">
  防止<code translate="no" class="notranslate text-nowrap">&lt;b-tab&gt;</code>被激活
  <a class="anchorjs-link" href="#preventing-a-b-tab-from-being-activated" aria-labelledby="preventing-a-b-tab-from-being-activated"></a></span></h2>
<p>
  要防止选项卡激活，只需在<code translate="no" class="notranslate text-nowrap">&lt;b-tab&gt;</code>组件上设置<code translate="no" class="notranslate text-nowrap">disabled</code>的属性。
</p>
<p>
  或者，您可以侦听<code translate="no" class="notranslate text-nowrap">activate-tab</code>事件，该事件提供了一个选项来阻止选项卡激活。<code translate="no" class="notranslate text-nowrap">activate-tab</code>事件由三个参数发出：
</p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">newTabIndex</code>: 将要激活的选项卡的索引</li>
<li><code translate="no" class="notranslate text-nowrap">prevTabIndex</code>: 当前活动选项卡的索引</li>
<li><code translate="no" class="notranslate text-nowrap">bvEvent</code>:
  <code translate="no" class="notranslate text-nowrap">BvEvent</code>对象。调用<code translate="no" class="notranslate text-nowrap">bvEvt.preventDefault()</code>
  以防止激活<code translate="no" class="notranslate text-nowrap">newTabIndex</code>
</li>
</ul>
<p>
  出于辅助功能的原因，当使用<code translate="no" class="notranslate text-nowrap">activate-tab</code>事件阻止选项卡激活时，应向用户提供一些通知方法，
  说明无法激活选项卡的原因。建议使用 <code translate="no" class="notranslate text-nowrap">&lt;b-tab&gt;</code> >组件上的<code translate="no" class="notranslate text-nowrap">disabled</code>属性，
  而不是使用<code translate="no" class="notranslate text-nowrap">activate-tab</code>事件（因为<code translate="no" class="notranslate text-nowrap">disabled</code>对于屏幕阅读器用户更直观）。
</p>
<h2 id="advanced-examples" class="bv-no-focus-ring"><span class="bd-content-title">高级示例<a class="anchorjs-link" href="#advanced-examples" aria-labelledby="advanced-examples"></a></span></h2>
<h3 id="external-controls-using-v-model" class="bv-no-focus-ring"><span class="bd-content-title">外部控件使用 <code translate="no" class="notranslate text-nowrap">v-model</code><a class="anchorjs-link" href="#external-controls-using-v-model" aria-labelledby="external-controls-using-v-model"></a></span></h3>
<div translate="translate" class="bd-example vue-example vue-example-b-tabs-controls notranslate">
<div>
<div class="card">
<div class="tabs" id="__BVID__1771">
<div class="card-header">
<ul role="tablist" class="nav nav-tabs card-header-tabs small" id="__BVID__1771__BV_tab_controls_">
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="4" aria-posinset="1" target="_self" href="#" class="nav-link" id="__BVID__1772___BV_tab_button__" aria-controls="__BVID__1772">General</a></li>
<li role="presentation" class="nav-item"><a role="tab" aria-selected="true" aria-setsize="4" aria-posinset="2" target="_self" href="#" class="nav-link active" id="__BVID__1774___BV_tab_button__" aria-controls="__BVID__1774">Edit profile</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="4" aria-posinset="3" target="_self" aria-disabled="true" href="#" class="nav-link disabled disabled" id="__BVID__1776___BV_tab_button__" aria-controls="__BVID__1776">Premium Plan</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="4" aria-posinset="4" target="_self" href="#" class="nav-link" id="__BVID__1778___BV_tab_button__" aria-controls="__BVID__1778">Info</a></li>
</ul>
</div>
<div class="tab-content" id="__BVID__1771__BV_tab_container_">
<div role="tabpanel" aria-hidden="true" class="tab-pane card-body" id="__BVID__1772" aria-labelledby="__BVID__1772___BV_tab_button__" style="display: none;">I'm the first fading tab</div>
<div role="tabpanel" aria-hidden="false" class="tab-pane active card-body" id="__BVID__1774" aria-labelledby="__BVID__1774___BV_tab_button__" style=""> I'm the second tab
<div class="card">
<div class="card-body">I'm the card in tab</div>
</div>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane disabled card-body" id="__BVID__1776" aria-labelledby="__BVID__1776___BV_tab_button__" style="display: none;">Sibzamini!</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane card-body" id="__BVID__1778" aria-labelledby="__BVID__1778___BV_tab_button__" style="display: none;">I'm the last tab</div>
</div>
</div>
</div>
<div class="text-center">
<div role="group" class="mt-2 btn-group">
<button type="button" class="btn btn-secondary">Previous</button>
<button type="button" class="btn btn-secondary">Next</button>
</div>
<div class="text-muted">Current Tab: 1</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-comment">&lt;!-- Tabs with card integration --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">no-body</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tabs</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"tabIndex"</span> <span class="hljs-attr">small</span> <span class="hljs-attr">card</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"General"</span>&gt;</span>I'm the first fading tab<span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Edit profile"</span>&gt;</span>
          I'm the second tab
          <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span>&gt;</span>I'm the card in tab<span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Premium Plan"</span> <span class="hljs-attr">disabled</span>&gt;</span>Sibzamini!<span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Info"</span>&gt;</span>I'm the last tab<span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-tabs</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

    <span class="hljs-comment">&lt;!-- Control buttons--&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button-group</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-2"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"tabIndex--"</span>&gt;</span>Previous<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"tabIndex++"</span>&gt;</span>Next<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-button-group</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-muted"</span>&gt;</span>Current Tab: {{ tabIndex }}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">tabIndex</span>: <span class="hljs-number">1</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h3 id="dynamic-tabs--tabs-end-slot" class="bv-no-focus-ring"><span class="bd-content-title">动态标签 + tabs-end slot<a class="anchorjs-link" href="#dynamic-tabs--tabs-end-slot" aria-labelledby="dynamic-tabs--tabs-end-slot"></a></span></h3>
<div translate="translate" class="bd-example vue-example vue-example-b-tabs-dynamic notranslate">
<div>
<div class="card">
<div class="tabs" id="__BVID__1781">
<div class="card-header">
<ul role="tablist" class="nav nav-tabs card-header-tabs" id="__BVID__1781__BV_tab_controls_">
<li class="nav-item"><a target="_self" href="#" class="nav-link"><b>+</b></a></li>
</ul>
</div>
<div class="tab-content" id="__BVID__1781__BV_tab_container_">
<div class="tab-pane active card-body">
<div class="text-center text-muted"> There are no open tabs<br>
Open a new tab using the <b>+</b> button above. </div>
</div>
</div>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">no-body</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-tabs</span> <span class="hljs-attr">card</span>&gt;</span>
        <span class="hljs-comment">&lt;!-- Render Tabs, supply a unique `key` to each tab --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-tab</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"i in tabs"</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"'dyn-tab-' + i"</span> <span class="hljs-attr">:title</span>=<span class="hljs-string">"'Tab ' + i"</span>&gt;</span>
          Tab contents {{ i }}
          <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"danger"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"float-right"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"closeTab(i)"</span>&gt;</span>
            Close tab
          <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-tab</span>&gt;</span>

        <span class="hljs-comment">&lt;!-- New Tab Button (Using tabs-end slot) --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:tabs-end</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> @<span class="hljs-attr">click.prevent</span>=<span class="hljs-string">"newTab"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>+<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

        <span class="hljs-comment">&lt;!-- Render this if no tabs --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:empty</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center text-muted"</span>&gt;</span>
            There are no open tabs<span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span>
            Open a new tab using the <span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>+<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span> button above.
          <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-tabs</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">tabs</span>: [],
        <span class="hljs-attr">tabCounter</span>: <span class="hljs-number">0</span>
      }
    },
    <span class="hljs-attr">methods</span>: {
      closeTab(x) {
        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i &lt; <span class="hljs-keyword">this</span>.tabs.length; i++) {
          <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.tabs[i] === x) {
            <span class="hljs-keyword">this</span>.tabs.splice(i, <span class="hljs-number">1</span>)
          }
        }
      },
      newTab() {
        <span class="hljs-keyword">this</span>.tabs.push(<span class="hljs-keyword">this</span>.tabCounter++)
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<!-- Component reference added automatically from component package.json -->

<h2 id="component-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">组件引用<a href="../../../bootstrap-vue/docs/components/tabs#component-reference" class="anchorjs-link" aria-labelledby="component-reference" target="_self"></a></span></h2>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-tabs" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-tabs&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/tabs#comp-ref-b-tabs" class="anchorjs-link" aria-labelledby="comp-ref-b-tabs" target="_self"></a></span></h3>
</div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/tabs/tabs.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-tabs-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-tabs&gt;</code> 属性 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-tabs-v-model"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-tabs&gt;</code> v-model </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-tabs-slots"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-tabs&gt;</code> 插槽 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-tabs-events"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-tabs&gt;</code> 事件 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-tabs-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/tabs#comp-ref-b-tabs-props" class="anchorjs-link" aria-labelledby="comp-ref-b-tabs-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__1519">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="id" class="" id="__BVID__1519__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>
<tr role="row" data-pk="tag" class="" id="__BVID__1519__row_tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tag</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'div'</code></td>
<td aria-colindex="4" role="cell" class="">指定要呈现的HTML标记，而不是默认标记</td>
</tr>
<tr role="row" data-pk="fill" class="" id="__BVID__1519__row_fill">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">fill</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">按比例用导航项填充所有水平空间。所有水平空间都被占用，但不是每个导航项都有相同的宽度</td>
</tr>
<tr role="row" data-pk="justified" class="" id="__BVID__1519__row_justified">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">justified</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">用导航项填充所有水平空间，但与“填充”不同，每个导航项的宽度都相同</td>
</tr>
<tr role="row" data-pk="align" class="" id="__BVID__1519__row_align">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">align</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">对齐导航中的导航项：“开始”（或“左”）、“中心”、“结束”（或“右”）</td>
</tr>
<tr role="row" data-pk="pills" class="" id="__BVID__1519__row_pills">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">pills</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">以pill按钮的外观呈现导航项</td>
</tr>
<tr role="row" data-pk="vertical" class="" id="__BVID__1519__row_vertical">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">vertical</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">垂直呈现选项卡控件</td>
</tr>
<tr role="row" data-pk="small" class="" id="__BVID__1519__row_small">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">small</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">使导航更小</td>
</tr>
<tr role="row" data-pk="card" class="" id="__BVID__1519__row_card">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">card</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">当设置为true时，将选项卡呈现为要放置到“b-card”中的适当样式</td>
</tr>
<tr role="row" data-pk="end" class="" id="__BVID__1519__row_end">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">end</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将制表符控件放在底部（水平制表符）或右侧（垂直制表符）</td>
</tr>
<tr role="row" data-pk="no-fade" class="" id="__BVID__1519__row_no-fade">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-fade</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">当设置为“true”时，禁用组件上的淡入动画/过渡</td>
</tr>
<tr role="row" data-pk="no-nav-style" class="" id="__BVID__1519__row_no-nav-style">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-nav-style</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">不使用选项卡样式呈现选项卡控件</td>
</tr>
<tr role="row" data-pk="no-key-nav" class="" id="__BVID__1519__row_no-key-nav">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-key-nav</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">禁用选项卡控件的键盘导航</td>
</tr>
<tr role="row" data-pk="lazy" class="" id="__BVID__1519__row_lazy">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">lazy</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">在显示b-tab内容时延迟呈现</td>
</tr>
<tr role="row" data-pk="content-class" class="" id="__BVID__1519__row_content-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">content-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">应用于选项卡内容包装的CSS类</td>
</tr>
<tr role="row" data-pk="nav-class" class="" id="__BVID__1519__row_nav-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">nav-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">应用于tablist（nav）包装的CSS类</td>
</tr>
<tr role="row" data-pk="nav-wrapper-class" class="" id="__BVID__1519__row_nav-wrapper-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">nav-wrapper-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">应用于tab控件包装元素的CSS类</td>
</tr>
<tr role="row" data-pk="active-nav-item-class" class="" id="__BVID__1519__row_active-nav-item-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">active-nav-item-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">应用于活动导航项选项卡控件的CSS类</td>
</tr>
<tr role="row" data-pk="active-tab-class" class="" id="__BVID__1519__row_active-tab-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">active-tab-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">应用于当前活动选项卡的CSS类</td>
</tr>
<tr role="row" data-pk="value" class="" id="__BVID__1519__row_value">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">value</code> <span data-v-866a22e8="" class="badge badge-primary">v-model</span></td>
<td aria-colindex="2" role="cell" class="">Number</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">当前可见的选项卡索引（基于零）</td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-tabs-v-model" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> v-model <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/tabs#comp-ref-b-tabs-v-model" class="anchorjs-link" aria-labelledby="comp-ref-b-tabs-v-model" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped" id="__BVID__1549">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">事件</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">value</code></td>
<td aria-colindex="2" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">input</code></td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-tabs-slots" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 插槽 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/tabs#comp-ref-b-tabs-slots" class="anchorjs-link" aria-labelledby="comp-ref-b-tabs-slots" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped" id="__BVID__1558">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">插槽名称</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="tabs-start" class="" id="__BVID__1558__row_tabs-start">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tabs-start</code></td>
<td aria-colindex="2" role="cell" class="">在“内容”选项卡按钮之前没有放置选项卡内容的其他选项卡按钮</td>
</tr>
<tr role="row" data-pk="tabs-end" class="" id="__BVID__1558__row_tabs-end">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tabs-end</code></td>
<td aria-colindex="2" role="cell" class="">在“内容”选项卡按钮之后放置没有选项卡内容的其他选项卡按钮</td>
</tr>
<tr role="row" data-pk="empty" class="" id="__BVID__1558__row_empty">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">empty</code></td>
<td aria-colindex="2" role="cell" class="">如果没有选项卡，则呈现此插槽</td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-tabs-events" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 事件 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/tabs#comp-ref-b-tabs-events" class="anchorjs-link" aria-labelledby="comp-ref-b-tabs-events" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__1569">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="input" class="" id="__BVID__1569__row_input">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">input</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">tabIndex</code> - <span data-v-866a22e8="">当前选定的选项卡索引（基于0的索引）</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">显示选项卡时发出。用于更新v-model</td>
</tr>
<tr role="row" data-pk="activate-tab" class="" id="__BVID__1569__row_activate-tab">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">activate-tab</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.1.0+</span></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">newTabIndex</code> - <span data-v-866a22e8="">正在激活的选项卡（基于0的索引）</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">prevTabIndex</code> - <span data-v-866a22e8="">当前处于活动状态的选项卡（基于0的索引）。如果当前没有活动选项卡，则为-1</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvEvt</code> - <span data-v-866a22e8="">BvEvent对象。调用bvEvt.preventDefault（）取消</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">在显示/激活选项卡之前发出。可取消</td>
</tr>
<tr role="row" data-pk="changed" class="" id="__BVID__1569__row_changed">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">changed</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">currentTabs</code> - <span data-v-866a22e8="">当前b-tab实例的数组，按文档顺序排列。</span></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">previousTabs</code> - <span data-v-866a22e8="">以前的b-tab实例的数组，按文档顺序排列。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">添加、删除或重新排序选项卡时发出</td>
</tr>
</tbody>
</table>
</div>
</article>
</section>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-tab" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-tab&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/tabs#comp-ref-b-tab" class="anchorjs-link" aria-labelledby="comp-ref-b-tab" target="_self"></a></span></h3>
</div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/tabs/tab.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-tab-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-tab&gt;</code> 属性 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-tab-slots"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-tab&gt;</code> 插槽 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-tab-events"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-tab&gt;</code> 事件 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-tab-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/tabs#comp-ref-b-tab-props" class="anchorjs-link" aria-labelledby="comp-ref-b-tab-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__1585">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>

<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="id" class="" id="__BVID__1585__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>
<tr role="row" data-pk="active" class="" id="__BVID__1585__row_active">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">active</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">当设置为“true”时，使用活动样式将组件置于活动状态</td>
</tr>
<tr role="row" data-pk="tag" class="" id="__BVID__1585__row_tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tag</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'div'</code></td>
<td aria-colindex="4" role="cell" class="">指定要呈现的HTML标记，而不是默认标记</td>
</tr>
<tr role="row" data-pk="button-id" class="" id="__BVID__1585__row_button-id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">button-id</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">使用此选项卡的选项卡控件按钮的特定ID。如果没有提供，将自动生成一个</td>
</tr>
<tr role="row" data-pk="title" class="" id="__BVID__1585__row_title">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">title</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">要放置在标题中的文本内容</td>
</tr>
<tr role="row" data-pk="title-item-class" class="" id="__BVID__1585__row_title-item-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">title-item-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">应用于选项卡的控制按钮“li”元素的CSS类</td>
</tr>
<tr role="row" data-pk="title-link-class" class="" id="__BVID__1585__row_title-link-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">title-link-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">应用于选项卡的控件按钮内部链接元素的CSS类</td>
</tr>
<tr role="row" data-pk="disabled" class="" id="__BVID__1585__row_disabled">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">disabled</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">当设置为“true”时，将禁用组件的功能并将其置于禁用状态</td>
</tr>
<tr role="row" data-pk="no-body" class="" id="__BVID__1585__row_no-body">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-body</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">当父b-tabs设置了“card”属性时，不要呈现卡体包装</td>
</tr>
<tr role="row" data-pk="lazy" class="" id="__BVID__1585__row_lazy">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">lazy</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">在显示此选项卡时延迟呈现其内容</td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-tab-slots" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 插槽 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/tabs#comp-ref-b-tab-slots" class="anchorjs-link" aria-labelledby="comp-ref-b-tab-slots" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped" id="__BVID__1605">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">插槽名称</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="title" class="" id="__BVID__1605__row_title">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">title</code></td>
<td aria-colindex="2" role="cell" class="">自定义选项卡标题槽</td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-tab-events" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 事件 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/tabs#comp-ref-b-tab-events" class="anchorjs-link" aria-labelledby="comp-ref-b-tab-events" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__1614">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="click" class="" id="__BVID__1614__row_click">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">click</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">evt</code> - <span data-v-866a22e8="">Original event object</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">单击选项卡或通过键盘导航激活时发出</td>
</tr>
</tbody>
</table>
</div>
</article>
<h3 id="importing-individual-components" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入单个组件 <a href="../../../bootstrap-vue/docs/components/tabs#importing-individual-components" class="anchorjs-link" aria-labelledby="importing-individual-components" target="_self"></a></span></h3>
<p> 您可以通过以下命名的导出将单个组件导入到项目中： </p>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__1625">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">组件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-tabs&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BTabs</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-tab&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BTab</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { BTabs } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.component(<span class="hljs-string">'b-tabs'</span>, BTabs)</pre></figure>
</article>
<article class="bd-content">
<h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入为Vue.js插件 <a href="../../../bootstrap-vue/docs/components/tabs#importing-as-a-plugin" class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
<p> 该插件包括上面列出的所有单个组件。插件还包括任何组件别名。 </p>
<div class="table-responsive-sm">
<table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__1636">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">TabsPlugin</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { TabsPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(TabsPlugin)</pre></figure>




</main>
</div>
</div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../v4/dist/js/popper.min.js"></script> 
<script src="../../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../../v4/assets/js/docs.min.js"></script> 
<script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
    inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>
